
  <div>

    <div class="col-md-8">
      <div class="panel panel-default" style="border-radius:5px;">
        <div class="panel-body" style="height:100%">
          <chart-map></chart-map>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row ">
        <div class="col-sm-6">
          <div class="panel panel-default m-l-n-md ">
            <div class="panel-body m-b-n-sm">
              <div style="font-size:15px;font:'微软雅黑';color:black;font-weight:bold">
                <span>总设备数</span>
                <span style="font:bold 12px;color:#00B0FF">+{{tdata?.device_xinzeng}}</span><span style="font-size:12px">台</span>
              </div>
              <div style="text-align:center;">
                <span style="font-size:30px;font-weight:bold;font:'微软雅黑';color:#00B0FF;" >{{tdata?.device_total}}</span>
                <span style="font-size:15px;font-weight:bold;font:'微软雅黑';color:black">台</span>
              </div>
            </div>
          </div>
          <div class="panel panel-default m-l-n-md m-t-n-sm">
            <div class="panel-body m-b-n-sm">
              <div style="font-size:15px;font:'微软雅黑';color:black;font-weight:bold">
                <span>当前设备故障数</span>
              </div>
              <div style="text-align:center;">
                <span style="font-size:30px;font-weight:bold;font:'微软雅黑';color:red;">{{tdata?.guzhang_dangqian}}</span>
                <span style="font-size:15px;font-weight:bold;font:'微软雅黑';color:black">台</span>
              </div>
            </div>
          </div>

          <div class="panel panel-default m-l-n-md m-t-n-sm">
            <div class="panel-body m-b-n-sm">
              <div style="font-size:15px;font:'微软雅黑';color:black;font-weight:bold">
                <span>本月新增故障数</span>
              </div>
              <div style="text-align:center;">
                <span style="font-size:30px;font-weight:bold;font:'微软雅黑';color:red;">{{tdata?.guzhang_xinzeng}}</span>
                <span style="font-size:15px;font-weight:bold;font:'微软雅黑';color:black">次</span>
              </div>
            </div>
          </div>
          <div class="panel panel-default m-l-n-md m-t-n-sm">
            <div class="panel-body m-b-n-sm">
              <div style="font-size:15px;font:'微软雅黑';color:black;font-weight:bold">
                <span>本月已修复故障数</span>
              </div>
              <div style="text-align:center;">
                <span style="font-size:30px;font-weight:bold;font:'微软雅黑';color:green;">{{tdata?.guzhang_wancheng}}</span>
                <span style="font-size:15px;font-weight:bold;font:'微软雅黑';color:black">次</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="panel panel-default m-l-n-md">
            <div class="panel-body m-b-n-sm">
              <div style="font-size:15px;font:'微软雅黑';color:black;font-weight:bold">
                <span>在线设备数</span>
              </div>
              <div style="text-align:center;">
                <span style="font-size:30px;font-weight:bold;font:'微软雅黑';color:green;">{{tdata?.device_online}}</span>
                <span style="font-size:15px;font-weight:bold;font:'微软雅黑';color:black">台</span>
              </div>
            </div>
          </div>

          <div class="panel panel-default m-l-n-md m-t-n-sm">
            <div class="panel-body m-b-n-sm">
              <div style="font-size:15px;font:'微软雅黑';color:black;font-weight:bold">
                <span>当前设备维保数</span>
              </div>
              <div style="text-align:center;">
                <span style="font-size:30px;font-weight:bold;font:'微软雅黑';color:orange;">{{tdata?.weibao_dangqian}}</span>
                <span style="font-size:15px;font-weight:bold;font:'微软雅黑';color:black">台</span>
              </div>
            </div>
          </div>
          <div class="panel panel-default m-l-n-md m-t-n-sm">
            <div class="panel-body m-b-n-sm">
              <div style="font-size:15px;font:'微软雅黑';color:black;font-weight:bold">
                <span>本月新增维保数</span>
              </div>
              <div style="text-align:center;">
                <span style="font-size:30px;font-weight:bold;font:'微软雅黑';color:orange;">{{tdata?.weibao_xinzeng}}</span>
                <span style="font-size:15px;font-weight:bold;font:'微软雅黑';color:black">次</span>
              </div>
            </div>
          </div>

          <div class="panel panel-default m-l-n-md m-t-n-sm">
            <div class="panel-body m-b-n-sm">
              <div style="font-size:15px;font:'微软雅黑';color:black;font-weight:bold">
                <span>当前已完成维保数</span>
              </div>
              <div style="text-align:center;">
                <span style="font-size:30px;font-weight:bold;font:'微软雅黑';color:green;">{{tdata?.weibao_wancheng}}</span>
                <span style="font-size:15px;font-weight:bold;font:'微软雅黑';color:black">次</span>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="panel panel-default m-t-n-sm m-l-n-md" >
        <div class="panel-body" style="height:250px;">
          <div>
            <span style="background-color:#81D4FA;font:20px bold ;color:black;">实时事件</span>
          </div>
          <table style="font-size:15px">
            <!--<tr ng-repeat="mdata in arr track by $index">-->
            <!--<td style="width:50%">{{mdata.time}}</td>-->
            <!--<td style="width:30%">{{mdata.mac}}</td>-->
            <!--<td style="color:gray;width:20%" ng-if="mdata.type=='offline' ">离线</td>-->
            <!--<td style="color:green;width:20%" ng-if="mdata.type=='online'">在线</td>-->
            <!--<td style="color:red;width:20%" ng-if="mdata.type=='guzhang'&&mdata.status==1">报警</td>-->
            <!--<td style="color:blue;width:20%" ng-if="mdata.type=='guzhang'&&mdata.status==2">接警</td>-->
            <!--<td style="color:blue;width:20%" ng-if="mdata.type=='guzhang'&&mdata.status==3">到场</td>-->
            <!--<td style="color:blue;width:20%" ng-if="mdata.type=='guzhang'&&mdata.status==4">完工</td>-->
            <!--<td style="color:green;width:20%" ng-if="mdata.type=='guzhang'&&mdata.status==5">恢复</td>-->
            <!--<td style="color:green;width:20%" ng-if="mdata.type=='guzhang'&&mdata.status==6">确认</td>-->
            <!--<td style="color:green;width:20%" ng-if="mdata.type=='guzhang'&&mdata.status==7">自动确认</td>-->
            <!--<td style="color:green;width:20%" ng-if="mdata.type=='guzhang'&&mdata.status==8">撤销</td>-->
            <!--<td style="color:green;width:20%" ng-if="mdata.type=='weibao'&&mdata.status==1">维保提醒</td>-->
            <!--<td style="color:green;width:20%" ng-if="mdata.type=='weibao'&&mdata.status==2">确认</td>-->
            <!--<td style="color:green;width:20%" ng-if="mdata.type=='weibao'&&mdata.status==5">恢复</td>-->

            <!--</tr>-->



          </table>
        </div>
      </div>
    </div>

  </div>
